<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 전파</title>
<style>
div {
	margin: 5px;
	padding: 5px;
	border: 1px solid black;
}
textarea {
	width: 90%;
	height: 200px;
}
</style>
<script type="text/javascript">
	window.onload = function(e) {
		var logger = document.getElementsByTagName('textarea')[0];
		function log(newtext) {
			logger.value += newtext + '\n';
			logger.scrollTop = logger.scrollHeight;
		}
		var divs = document.getElementsByTagName('div');
		for ( var i = 0; i < divs.length; i++) {
			(function() {
				var div = divs[i];
				div.onclick = function(e) {
					if (div.id === 'depth1') {
						log(div.id);
					} else if (div.id === 'depth2') {
						log(div.id);
					} else if (div.id === 'depth3') {
						log(div.id);
					}
				}
			})();
		}
	}
</script>
</head>
<body>
	<div id="depth1">
		depth1
		<div id="depth2">
			depth2
			<div id="depth3">
				depth3
			</div>
		</div>
	</div>
	<textarea style="width:100%; height: 100px;"></textarea>
</body>
</html>
